:root {
    --chat-bg-color: var(--b3-theme-background);

    --chat-user-bg: var(--b3-theme-surface-light);
    --chat-assistant-bg: var(--b3-theme-surface-light);

    --chat-input-bg: var(--b3-theme-background);

    --chat-text-color: var(--b3-theme-on-background);
    --chat-border-color: var(--b3-border-color);

    --chat-input-font-size: 20px;
    --chat-message-font-size: 19px;

    --chat-max-width: 1250px;
}

$chat-narrow-container: 600px;
$chat-very-narrow-container: 400px;

// 顶层的思源容器会设置 container-type 为 inline-size
.chatContainer {
    // container-type: inline-size;
    // container-name: gpt-chat;

    width: 100%;
    height: 100%;
    max-width: var(--chat-max-width);
    flex: 1;
    margin: 0 auto;
    padding: 0 min(20px, 3%);
    padding-bottom: min(20px, 4%);

    background: var(--chat-bg-color);

    display: flex;
    flex-direction: column;
    align-self: center;

    overflow-x: hidden;

    &.readingMode {
        .inputContainer {
            display: none;
        }

        .messageList {
            padding-bottom: 5px;
        }
    }
}


.topToolbar {
    position: sticky;
    top: 0;
    height: 50px;

    padding: 0 min(10px, 2%);
    margin-top: 1em;

    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--chat-bg-color);

    font-size: var(--chat-input-font-size);
    font-weight: 500;
    z-index: 2;

    --topbar-btn-size: 20px;

    div.chatTitle {
        display: flex;
        flex: 1;
        position: relative;
        align-items: center;
        justify-content: center;
        padding-left: 5px;
        padding-right: 5px;
        gap: 4px;
        cursor: pointer;

        // 标题文本
        white-space: nowrap; // 防止文本换行
        overflow: hidden; // 隐藏超出部分
        text-overflow: ellipsis; // 使用 ... 表示被截断的文本

        :global(.b3-chips) {
            position: absolute;
            right: 0;
            // transform: translateX(-100%);
        }

        @container (max-width: #{$chat-narrow-container}) {
            font-size: 0.85em;

            .b3-chips {
                font-size: 0.6em;
            }
        }

        @container (max-width: #{$chat-very-narrow-container}) {
            font-size: 0.75em;

            .b3-chips {
                display: none;
            }
        }
    }

    @container (max-width: #{$chat-narrow-container}) {
        --topbar-btn-size: 17px;
    }

    @container (max-width: #{$chat-very-narrow-container}) {
        --topbar-btn-size: 15px;
    }
}

.messageList {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    // margin-bottom: 20px;

    // Remove default focus outline
    &:focus {
        outline: none;
    }

    // Optional: add a custom subtle focus style if you want
    &:focus-visible {
        outline: none;
        // box-shadow: inset 0 0 0 2px var(--b3-theme-primary-lighter);
    }
}

.inputContainer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--chat-bg-color);
    padding: 0;

    .toolbar {
        width: 100%;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        background-color: var(--chat-bg-color);

        & :global(.b3-button) {
            height: 27px;

            >svg {
                height: 100%;
                margin: 0 auto;
                fill: currentColor;
            }
        }

        >span[data-role="model"] {
            max-width: 10em !important;
            justify-content: flex-start;
        }

        @container (max-width: #{$chat-narrow-container}) {
            // >div[data-role="spacer"] {
            //     display: none;
            // }

            // justify-content: unset;

            span[data-hint="true"] {
                display: none;
            }
        }

        @container (max-width: #{$chat-very-narrow-container}) {
            // >span[data-role="model"] {
            //     max-width: 5em !important;
            // }

            span.toolbarLabel[data-role="system-prompt"],
            span.toolbarLabel[data-role="setting"] {
                display: none;
            }
        }
    }

    .inputWrapper {
        position: relative;
        display: flex;
        gap: 8px;
        width: 100%;
        padding: 0px;

        &.dropTarget {
            position: relative;

            &::after {
                content: 'Drop To Add Context';
                text-align: center;
                font-weight: bold;
                padding-top: 1em;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px dashed var(--b3-theme-primary);
                border-radius: 8px;
                background-color: var(--b3-theme-primary-lightest);
                pointer-events: none;
                z-index: 1;
                animation: pulse 1.5s infinite;
            }

            @keyframes pulse {
                0% {
                    opacity: 0.6;
                }
                50% {
                    opacity: 0.8;
                }
                100% {
                    opacity: 0.6;
                }
            }
        }

        textarea.input {
            flex: 1;
            padding: 10px;
            padding-right: 50px;
            border: 2px solid var(--b3-theme-primary-light);
            border-radius: 8px;
            background: var(--chat-input-bg);
            font-size: var(--chat-input-font-size);
            min-height: 50px;
            max-height: 250px;
            overflow-y: auto;
            color: var(--chat-text-color);
            resize: none;

            &:focus {
                outline: none;
                border-color: var(--b3-theme-primary);
            }
        }
    }

    .attachmentArea {
        min-height: 32px;
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 0 8px;
        border-top: 1px solid var(--b3-border-color);
        background: var(--b3-theme-background);
    }

    .attachmentItem {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--b3-border-color);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }

        button {
            position: absolute;
            top: 4px;
            right: 4px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.2s;

            &:hover {
                background: rgba(0, 0, 0, 0.7);
            }

            svg {
                width: 14px;
                height: 14px;
                color: white;
            }
        }

        &:hover button {
            opacity: 1;
        }
    }
}

/**
 * 对话工具栏的标签、按钮
 */
.toolbarLabel {
    box-shadow: 0 0 3px 1px var(--b3-theme-primary-lighter);
    max-width: 15em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.primaryButton {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 6px;
    border-width: 0px;
    font-family: var(--b3-font-family-protyle), inherit;
    font-size: var(--chat-input-font-size);
    opacity: 0.9;

    &:disabled {
        background: var(--b3-theme-surface);
        opacity: 0.6;
        cursor: not-allowed;
    }

    &:hover:not(:disabled) {
        opacity: 1;
    }
}

.text-seperator {
    text-align: center;
    color: var(--b3-theme-on-surface);
    position: relative;
    margin-bottom: 20px;

    span[data-type="button"] {
        position: absolute;
        left: 10px;
        cursor: pointer;
        opacity: 0;
    }

    &:hover {
        span[data-type="button"] {
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }
    }
}

.batchOperationBar {
    display: flex;
    align-items: center;
    padding: 0.5em 1em;
    background-color: var(--b3-theme-surface);
    border-top: 1px solid var(--b3-border-color);
    gap: 0.5em;

    height: 40px;

    button {
        display: flex;
        align-items: center;
        gap: 0.3em;
        padding: 4px 8px;
    }
}


.custom-protyle-text-editor {
    :global(.protyle-wysiwyg) {
        font-size: var(--input-font-size) !important;
        padding: 16px 24px !important;

        // [data-node-id] {
        //     line-height: 1.6;
        // }
    }
}